<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 查询参数 -->
          <pro-query
            :searchParam="searchParam"
            @on-search ="search"
          ></pro-query>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <a-button type="primary" class="editable-add-btn" @click="handleAdd">新增</a-button>
          <!-- 列表 -->
          <a-table bordered :columns="columns" :data-source="dataSource" :pagination="pagination" rowKey="id">
            <template v-for="col in ['gzzryuan', 'zywti', 'yjjyi', 'zrdwei', 'jcdwei', 'jcsjian', 'wcsxian', 'zgqkuang']" #[col]="{ text, record }" :key="col">
              <div>
                <template v-if="editableData[record.id] && ['zgqkuang'].includes(col)">
                  <a-select
                    ref="select"
                    v-model:value="editableData[record.id][col]"
                    style="width: 140px"
                  >
                    <a-select-option value="已整改">已整改</a-select-option>
                    <a-select-option value="整改中">整改中</a-select-option>
                    <a-select-option value="不具备整改条件">不具备整改条件</a-select-option>
                    <a-select-option value="未整改">未整改</a-select-option>
                  </a-select>
                </template>
                <template v-else-if="editableData[record.id] && ['zywti', 'yjjyi'].includes(col)">
                  <a-textarea
                    v-model:value="editableData[record.id][col]"
                  />
                </template>
                <template  v-else-if="editableData[record.id] && ['gzzryuan', 'zrdwei', 'jcdwei'].includes(col)">
                  <a-input
                    v-model:value="editableData[record.id][col]"
                    style="margin: -5px 0"
                  />
                </template>
                <template v-else-if="editableData[record.id] && ['jcsjian', 'wcsxian'].includes(col)">
                  <a-date-picker v-model:value="editableData[record.id][col]" valueFormat="YYYY-MM-DD" style="width: 110px;"/>
                </template>
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>

            <template #operation="{ record }">
              <div style="width: 100px;">
                <span class="editable-row-operations">
                <span v-if="editableData[record.id]">
                  <a @click="baocun(record.id)">保存</a>
                  <a-popconfirm title="确定取消吗？" @confirm="cancel(record.id)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="edit(record.id)">编辑</a>
                </span>
              </span>
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除吗？"
                  @confirm="onDelete(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </div>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>
<script>
import {reactive, ref, toRaw} from 'vue';
import {page, remove, save} from '@/api/module/jcdy';
import { message} from 'ant-design-vue';
import {cloneDeep} from "lodash-es";
import { v4 as uuidv4 } from "uuid";
import global from '../global/global';

const removeKey = "remove";

export default {
  components:  {
  },
  setup() {
    const tableRef = ref()

    const editableData = reactive({});

    /// 列配置
    const columns = [
      { dataIndex: "gzzryuan", key: "gzzryuan", title: "工作组人员", slots: {customRender: 'gzzryuan'}},
      { dataIndex: "zywti", key: "zywti", title: "主要问题", slots: {customRender: 'zywti'}},
      { dataIndex: "yjjyi", key: "yjjyi", title: "意见建议", slots: {customRender: 'yjjyi'}},
      { dataIndex: "zrdwei", key: "zrdwei", title: "责任单位", slots: {customRender: 'zrdwei'}},
      { dataIndex: "jcdwei", key: "jcdwei", title: "检查单位", slots: {customRender: 'jcdwei'}},
      { dataIndex: "jcsjian", key: "jcsjian", title: "检查时间", width: 105, slots: {customRender: 'jcsjian'}},
      { dataIndex: "wcsxian", key: "wcsxian", title: "整改时限", width: 105, slots: {customRender: 'wcsxian'}},
      { dataIndex: "zgqkuang", key: "zgqkuang", title: "整改情况", width: 105, slots: {customRender: 'zgqkuang'}},
      { key: 'operation', title: '操作', width: 100, slots: {customRender: 'operation'}},
    ]

    const dataSource = ref([]);
    page({"xmid": global.xmid}).then((response) => {
      dataSource.value = response.data.record;
    });

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    /// 查询操作
    const search = function(value) {
      page({"zgqkuang": value.zgqkuang}).then((response) => {
        dataSource.value = response.data.record;
      });
    }

    /// 查询参数
    const searchParam = [
      { key: "zgqkuang", type: "select", label: "整改情况", value: "",
        options: [
          { text: "全部", value: ""},
          { text: "已整改", value: '已整改'},
          { text: "整改中", value: '整改中'},
          { text: "不具备整改条件", value: '不具备整改条件'},
          { text: "未整改", value: '未整改'},
        ]
      }
    ]

    const handleAdd = () => {
      let random = uuidv4().replaceAll("-", "");
      let xmid = global.xmid;
      const addData = {
        id: random,
        xmid: xmid,
        gzzryuan: '',
        zywti: '',
        yjjyi: '',
        zrdwei: '',
        jcdwei: '',
        jcsjian: '',
        wcsxian: '',
        zgqkuang: '',
      };
      dataSource.value.push(addData);
      edit(random);
    };

    const cancel = key => {
      delete editableData[key];
    };

    const onDelete = key => {
      console.log(key)
      dataSource.value = dataSource.value.filter(item => item.id !== key);
      remove({"id": key}).then((response) => {
        if(response.success){
          message.success({content: "删除成功", key: removeKey, duration: 1})
        } else {
          message.error({content: "删除失败", key: removeKey, duration: 1})
        }
      })
    };

    const edit = key => {
      editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
    };
    const baocun = key => {
      Object.assign(dataSource.value.filter(item => key === item.id)[0], editableData[key]);
      save(toRaw(editableData[key])).then((response) => {
        if(response.success){
          message.success({ content: '提交成功', duration: 1 })
        }else{
          message.error({ content: '提交失败', duration: 1 })
        }
      }).catch(error => {
        console.log('error', error);
      });

      delete editableData[key];
    };

    return {
      //fetch,
      columns,
      pagination,

      search,
      searchParam,

      handleAdd,
      tableRef,

      dataSource,

      onDelete,
      edit,
      baocun,
      editableData,
      cancel,
    };
  }
}
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>
